<template>
    <view class="page">
        <back :title="'信息'" :isBack="true"></back>
        <view class="content_box">

            <view class="left_msg_box">
                <view class="left_msg_bot_box">
                    <view class="tx_box">
                        <image :src="deaObj.avatar" mode="scaleToFill" />
                    </view>
                    <view class="left_tx_rt_text_box">
                        <view class="nNmae_box">
                            {{ deaObj.nickname }}
                        </view>
                        <view class="nTime_box">{{ deaObj.created_at }}</view>
                    </view>
                </view>
            </view>
            <view class="lianxi_box">联系电话：{{ deaObj.phone }}</view>
            <view class="lianxi_box" style="margin-bottom: 40rpx;">地址：{{ deaObj.address }}</view>
            <view class="title_box">
                {{ deaObj.title }}
            </view>
            <scroll-view scroll-y class="htmCom_box" show-scrollbar="false">
                <view v-html="deaObj.content">
                </view>
            </scroll-view>
        </view>
        <view class="bottom_box">
            <view class="fx_box" @click="share">

                <button class="button" open-type="share" @getuserinfo="onShareButtonTap"></button>
            </view>

            <view class="ckdz_box">
                <view class="ckdz_icon_box"></view>
                <view class="ckdz_text_box" @click="goAddress(deaObj)">查看地址</view>
            </view>
            <view class="dhlx_box">
                <view class="ckdz_icon_box"></view>
                <view class="ckdz_text_box" @click="phone(deaObj.phone)">电话联系</view>
            </view>
        </view>
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            id: '',
            deaObj: {},
        }
    },
    onLoad(options) {
        this.id = options.id
    },
    onShow() {
        this.detailShow()
    },
    methods: {
        phone(phone) {
            console.log(phone)
            const res = uni.getSystemInfoSync(); //获取当前的手机机型
            if (res.platform == 'ios') {
                uni.makePhoneCall({
                    phoneNumber: phone
                })
            } else {
                uni.makePhoneCall({
                    phoneNumber: phone,
                })
            }
        },
        detailShow() {
            let data = {
                id: this.id
            }
            this.$Request.post(this.$api.user.infomationDetail, data).then(res => {
                if (res.code == 200) {
                    this.deaObj = res.data
                    console.log(this.deaObj, 'this.deaObj')
                }
            })
        },
        onShareButtonTap() {
            // 分享事件处理函数
            // 返回分享的内容
            return {
                title: this.deaObj.title,
                path: '/userPage/information/informDetail?id=' + this.id,
                imageUrl: '' // 分享卡片的图片，可选
            };
        },
        goAddress(item) {
            uni.openLocation({
                latitude: item.lat * 1,
                longitude: item.lng * 1,
                address: item.address,
                // scale: ,
                success: function () {
                    console.log('success');
                },
                fail(err) {
                    console.log(err, "errrr")
                }
            });
        }

    }
}
</script>
<style lang="scss" scoped>
button::after {
    border: none
}

.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 1);
    position: relative;

    .content_box {
        width: 100%;
        height: calc(100vh - 180rpx);
        box-sizing: border-box;
        padding: 28rpx 42rpx;

        .title_box {
            width: 618rpx;
            font-size: 44rpx;
            font-weight: 800;
            letter-spacing: 0rpx;
            line-height: 56rpx;
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: 34rpx;
        }

        .lianxi_box {

            /** 文本1 */
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx;
            color: rgba(59, 59, 59, 1);
            margin-bottom: 6rpx;

        }

        .left_msg_box {
            width: 100%;
            margin-bottom: 44rpx;

            .left_msg_top_box {
                width: 100%;
                font-size: 32rpx;
                font-weight: 700;
                color: rgba(34, 34, 34, 0.9);
                text-align: left;
                margin-bottom: 20rpx;
            }

            .left_msg_bot_box {
                width: 100%;
                height: 100rpx;
                display: flex;
                justify-content: flex-start;

                .tx_box {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                    margin-right: 12rpx;

                    image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 50%;
                    }
                }

                .left_tx_rt_text_box {
                    height: 100rpx;

                    .nNmae_box {
                        height: 50rpx;
                        font-size: 28rpx;
                        font-weight: 500;
                        line-height: 50rpx;
                        color: rgba(56, 56, 56, 1);
                        text-align: left;
                    }

                    .nTime_box {
                        height: 50rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        line-height: 50rpx;
                        color: rgba(194, 194, 194, 1);
                        text-align: left;

                    }
                }
            }

        }

        .htmCom_box {
            width: 100%;
            height: 840rpx;
            width: 670rpx;
            font-size: 32rpx;
            font-weight: 400;
            letter-spacing: 2rpx;
            line-height: 50rpx;
            color: rgba(59, 59, 59, 1);


            /* 去掉scroll-view默认的滚动条 */
            ::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
                color: transparent;

            }
        }
    }

    .bottom_box {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 150rpx;
        box-sizing: border-box;
        padding: 0 50rpx;
        display: flex;
        justify-content: space-between;


        .fx_box {
            width: 60rpx;
            height: 100rpx;
            padding-top: 12rpx;

            .button {
                width: 60rpx;
                height: 88rpx;
                background-color: rgba(255, 255, 255, 1);
                padding: 0;
                margin: 0;
                background-image: url('https://rubbish.lwjcg.com/static/index/fx.png');
                background-size: 100% 100%;
            }
        }

        .ckdz_box {
            width: 264rpx;
            height: 100rpx;
            opacity: 1;
            border-radius: 12rpx;
            background: rgba(218, 245, 233, 1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 40rpx;

            .ckdz_icon_box {
                width: 32rpx;
                height: 32rpx;
                background-image: url('https://rubbish.lwjcg.com/static/index/ckdz.png');
                background-size: 100% 100%;

            }

            .ckdz_text_box {
                height: 46rpx;
                font-size: 32rpx;
                font-weight: 400;
                line-height: 46rpx;
                color: rgba(26, 194, 121, 1);

            }

        }

        .dhlx_box {
            width: 264rpx;
            height: 100rpx;
            border-radius: 12rpx;
            background: rgba(26, 194, 121, 1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 0 40rpx;

            .ckdz_icon_box {
                width: 32rpx;
                height: 32rpx;
                background-image: url('https://rubbish.lwjcg.com/static/index/dhlx.png');
                background-size: 100% 100%;

            }

            .ckdz_text_box {
                height: 46rpx;
                font-size: 32rpx;
                font-weight: 400;
                line-height: 46rpx;
                color: rgba(255, 255, 255, 1);

            }

        }
    }
}
</style>